<template>
    <div class="myCartrow2div">
    <el-row class="myCartrow2" type="flex" justify="center" 
    v-for="(CartDate , index) in axiosCartDate" :key="index">
        <el-col :span="9" class="myCartcol2"><div class="myCartcolthing" style="display: inline-block;">
            <div class="productshowdiv1">
                <el-checkbox v-model="productchecked[index]"></el-checkbox>
            </div>
            <div class="productshowdiv2">
            <el-popover placement="right-start" trigger="hover" width="220">
                <img class="myCartbigpicture" :src="axiosbigimageinfo[index]">
                <img class="myCartsmallpicture" slot="reference" :src="axiossmallimageinfo[index]"
                @click="BackToProductDetails(CartDate.pid)">
            </el-popover>
            </div>
            <div class="myCartproductshowdiv3">
                <div class="myCartproductshowdiv3name">
                    <span @click="BackToProductDetails(CartDate.pid)">{{CartDate.title}}</span>
                </div>
                <div class="myCartproductshowdiv3style">
                    <span class="productshowstyle">类型： {{CartDate.title.slice(2)}}
                    </span>
                </div>
            </div>
        </div></el-col>
        <el-col :span="6" class="myCartcol2"><div class="myCartcolthing">
            <span class="myCartcolpriceshow1">优惠后￥<b>{{CartDate.realprice}}</b></span>
            <span class="myCartcolpriceshow2">￥{{CartDate.price}}</span></div></el-col>
        <el-col :span="5" class="myCartcol2"><div class="myCartcolthing">
            <el-input-number v-model="num[index]" @change="myCartnumchange" :min="1" :max="99"
            size="small" class="myCartnumchange"></el-input-number>
        </div></el-col>
        <el-col :span="4" class="myCartcol2"><div class="myCartcolthing">
            <span @click="myCartcartdelete" class="myCartcartdelete">删除</span>
        </div></el-col>
    </el-row>
    <!-- <el-row class="myCartrow2" type="flex" justify="center">
        <el-col :span="9" class="myCartcol2"><div class="myCartcolthing" style="display: inline-block;">
            <div class="productshowdiv1">
                <el-checkbox v-model="productcheckedtest"></el-checkbox>
            </div>
            <div class="productshowdiv2">
            <el-popover placement="right-start" trigger="hover" width="220">
                <img class="myCartbigpicture" src="../../assets/portal/17Lenovo)xiaoxinAir13Pro_gold/1_big.jpg">
                <img class="myCartsmallpicture" slot="reference" src="../../assets/portal/17Lenovo)xiaoxinAir13Pro_gold/1.jpg">
            </el-popover>
            </div>
            <div class="myCartproductshowdiv3">
                <div class="myCartproductshowdiv3name">
                    <span>星15锐龙版2021【享5件套】R3/R5轻薄笔记本电脑</span>
                </div>
                <div class="myCartproductshowdiv3style">
                    <span class="productshowstyle">类型： 星15锐龙版2021【享5件套】R3/R5轻薄笔记本电脑
                    </span>
                </div>
            </div>
        </div></el-col>
        <el-col :span="6" class="myCartcol2"><div class="myCartcolthing">
            <span class="myCartcolpriceshow1">优惠后￥<b>3589</b></span>
            <span class="myCartcolpriceshow2">￥3680</span></div></el-col>
        <el-col :span="5" class="myCartcol2"><div class="myCartcolthing">
            <el-input-number v-model="num2" @change="myCartnumchange" :min="1" :max="99"
            size="small" class="myCartnumchange"></el-input-number>
        </div></el-col>
        <el-col :span="4" class="myCartcol2"><div class="myCartcolthing">
            <span @click="myCartcartdelete" class="myCartcartdelete">删除</span>
        </div></el-col>
    </el-row> -->
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'XiaoCartProductList',
        data(){
            return{
                num:[],
                num2:1,
                productchecked:[],
                productcheckedtest:'false',
                axiosCartDate:'',
                axiossmallimageinfo:[],
                axiosbigimageinfo:[],
                myoldnum:[],
                mynewnum:[],
                ShowCheckedCart:[],    //需要路由传
                totalpricecart:0,   //需要全局传到3
                totalrealpricecart:0,
                discountcart:0,
                myCartnumchangeprice:[],
                TrueorFalse:false,  //需要全局传到4
            }
        },
        mounted(){
            this.$addr.get(`carts`).then(
                response=>{
                    console.log('请求获取该用户购物车信息成功了',response)
                    this.axiosCartDate=response.data.data
                    for( let i=0; i<response.data.data.length; i++){
                        this.num[i]=this.axiosCartDate[i].num
                        // Math.round(this.axiosData.price*0.6)*this.mynumber
                        this.axiosCartDate[i].realprice=Math.round(this.axiosCartDate[i].price*0.6)
                        this.axiossmallimageinfo[i]=require(`../../assets/${response.data.data[i].image.slice(13)}1.jpg`)
                        this.axiosbigimageinfo[i]=require(`../../assets/${response.data.data[i].image.slice(13)}1_big.jpg`)
                        this.productchecked[i]=false
                    }
                },
                error=>{
                    console.log('请求获取该用户购物车信息商品详情失败了',error.message)
                }
            )
        },
        computed:{
            //解决出现watch监听时新值与旧值相同的情况:配合computed深度复制
            goWatchNum(){
                return JSON.parse(JSON.stringify(this.num))
            },
        },
        watch:{
            //显示方面:勾选后需要显示价格以及去结算的按钮变化。
            //传递方面:需要传递cid去显示购物车中勾选的商品。
            productchecked(newval ,oldval){
                this.TrueorFalse=false
                // console.log(newval,'###');
                this.totalpricecart=this.totalrealpricecart=this.discountcart=0
                for( let i=0 ; i<newval.length ; i++){
                    // console.log('%%%',newval[i]);
                    if(newval[i] == true){
                        this.totalpricecart+=this.axiosCartDate[i].price*this.num[i]
                        this.totalrealpricecart+=this.axiosCartDate[i].realprice*this.num[i]
                        this.TrueorFalse=true
                    }
                    this.myCartnumchangeprice[i]=newval[i]
                    // this.ShowCheckedCart[i]=[this.axiosCartDate[i].cid , newval[i]]
                    this.ShowCheckedCart[i]={cid:this.axiosCartDate[i].cid ,judge:newval[i]}
                }
                this.$bus.$emit('CPListtoCPShow',this.TrueorFalse,this.ShowCheckedCart)

                this.discountcart=this.totalpricecart-this.totalrealpricecart
                this.$bus.$emit('CPListtoCTPrice',this.totalpricecart,this.totalrealpricecart,this.discountcart)
                // console.log(this.ShowCheckedCart,'看看宝贝赋值得如何了');
            },
            goWatchNum(newval ,oldval){
                // console.log(oldval,'^^^11',newval);
                //因为此处会打印监视出两次的num,第二次的新旧数据相同
                this.myoldnum=oldval
                //因为第一次不会显示出oldval,所以用第一个new来代替第一次的oldval
                this.mynewnum=newval
            }
        },
        methods:{
            myCartcartdelete(){
                console.log('delete！');
            },
            myCartnumchange(){
                // console.log('myCartnumchange!');
                // console.log('old:',this.myoldnum);
                // console.log('num:',this.num);
                this.totalpricecart=this.totalrealpricecart=this.discountcart=0
                for( let i=0 ; i<this.num.length ; i++){
                    if(this.myCartnumchangeprice[i] == true){
                        this.totalpricecart+=this.axiosCartDate[i].price*this.num[i]
                        this.totalrealpricecart+=this.axiosCartDate[i].realprice*this.num[i]
                    }
                    if(this.num.length == this.mynewnum.length && this.num.length != this.myoldnum.length){
                        if(this.num[i] == this.mynewnum[i]){
                            // console.log('第'+i+'个一样',this.num[i]);
                        }else if(this.num[i] != this.mynewnum[i]){
                        this.$addr.get(`carts/${this.axiosCartDate[i].cid}/${this.num[i]}/changenum`).then(
                            response=>{
                                console.log('请求修改数量成功了',response)
                                },
                            error=>{
                                console.log('请求修改数量失败了',error.message)
                            })
                        // console.log('第'+i+'个不一样',this.mynewnum[i],'##',this.num[i]);
                        }
                    }
                    
                    if(this.num.length == this.myoldnum.length){
                        if(this.num[i] == this.myoldnum[i]){
                            // console.log('第'+i+'个一样',this.num[i]);
                        }else if(this.num[i] != this.myoldnum[i]){
                            this.$addr.get(`carts/${this.axiosCartDate[i].cid}/${this.num[i]}/changenum`).then(
                                response=>{
                                    console.log('请求修改数量成功了',response)
                                    },
                                error=>{
                                    console.log('请求修改数量失败了',error.message)
                                })
                        // console.log('第'+i+'个不一样',this.myoldnum[i],'##',this.num[i]);
                        }
                    }
                }
                this.discountcart=this.totalpricecart-this.totalrealpricecart
                this.$bus.$emit('CPListtoCTPrice',this.totalpricecart,this.totalrealpricecart,this.discountcart)
            },
            BackToProductDetails(id){
                this.$router.push({
                    name:'xProductDetails',
                    params:{id:id}})
            },
        }
    }
</script>

<style scoped>
.myCartrow2div{
    margin-left: 35px;
    margin-right: 35px;
    border: 1px solid rgb(172, 172, 172);
}
.myCartrow2{
    height: 100px;
}
.myCartcol2{
    height: 100px;
    font-size: 12px;
}
.myCartcolthing{
    margin-top: 15px;
    text-align: center;
}
.productshowdiv1{
    margin-top: 25px;
    margin-left: 15px;
    position: absolute;
}
.productshowdiv2{
    margin-left: 35px;
    position: absolute;
}
.myCartbigpicture{
    height: 200px;
    width: 220px;
}
.myCartsmallpicture{
    height: 80%;
    width: 80%;
    border: 1px solid rgb(221, 221, 221);
    cursor: pointer;
}
.myCartproductshowdiv3{
    text-align: left;
    margin-left: 130px;
    width: 200px;
    position: absolute;
}
.myCartproductshowdiv3name{
    cursor: pointer;
}
.myCartproductshowdiv3name :hover{
    color: rgb(228, 67, 102);
}
.myCartproductshowdiv3style{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 10px;
    height: 18px;
}
.myCartcolpriceshow1{
    font-size: 13px;
    position: relative;
    color: rgb(228, 67, 102);
}
.myCartcolpriceshow2{
    position: absolute;
    margin-top: 20px;
    margin-left: -45px;
    text-decoration: line-through;
}
.myCartnumchange{
    width: 105px;
}
.myCartcartdelete{
    cursor: pointer;
}
</style>